<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 先布局DOM对象，包括标题，单个复选框，多个复选框（循环），
         标题+文本框，文件上传组件，上传按钮，全选按钮，全不选按钮，反选按钮，下载好若干图片 -->
        <h3>你最喜欢吃什么？</h3>
        <!-- 单个复选框 -->
        <input type="checkbox" @change="fullCheck()" v-model="all">全选<br>
        <!-- 多个复选框 -->
        <span v-for="(item,index) in list"><input type="checkbox" v-model="item.check" @change="checkClick()">{{item.name}}</span><br>
        
        新增美食：<input type="text" v-model="name"><br>
        <input type="file" @change="load($event)"><button @click="add()">上传</button><br>
        
        <button @click="selectAll()">全选</button>
        <button @click="deselectAll()">全不选</button>
        <button @click="invertSelection()">反选</button>
        <br>
        <span v-for="(item,index) in list"><img :src="item.src" style="width:300px;height: 300px;" v-show="item.check"></span>

    </div>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data(){
            return{
                list:[{name:'红烧肉',check:false,src:'./红烧肉.png'},
                    {name:'麻辣烫',check:false,src:'./麻辣烫.png'},
                    {name:'烧烤',check:false,src:'./烧烤.png'},
                    {name:'寿司',check:false,src:'./寿司.png'}
                ],
                all:false,
                fileSrc:'',
                name:''
                
            }
        },
        methods: {
            fullCheck(){
                if(this.all){//如果全选按钮被选中，遍历数组，把每个对象中的check置为true
                    //可以使用数组中的map方法对数组进行遍历
                    this.list.map(v=>{
                        v.check=true
                    })
                }
                else{//如果没有被选中，则同样遍历数组，把每个对象中的check置为false
                    this.list.map(v=>{
                            v.check=false
                    })
                }
            },
            checkClick(){
                let flag = this.list.length //获取数组长度
                this.list.map(vv=>{ //箭头函数，vv（名字可以任意）表示我的遍历的循环体
                    if(!vv.check){ //遍历检查check，如果是false，则把flag减1
                        flag--
                    }
                })
                if(flag<this.list.length){
                    this.all = false
                }else{
                    this.all = true
                }
            },
            load(e){
                let file = e.target.files 
                let img = new FileReader() 
                img.readAsDataURL(file[0])
                img.onload = ({target})=>{
                    alert("上传成功")
                    this.fileSrc = target.result
                }
            },
            add(){
                this.list.push({name:this.name,check:false,src:this.fileSrc})
            },
            selectAll(){
                this.list.map(v=>{
                        v.check=true
                    })
            },
            deselectAll(){
                this.list.map(v=>{
                        v.check=false
                    })
            },
            invertSelection(){
                this.list.map(v=>{
                        v.check = !v.check
                    })
            }
        },
    }).mount("#app")
</script>